<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-28 18:24:49
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-28 21:38:03
 * @FilePath: \guanggu_traffic\src\components\public\MapRealTimeTraffic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<template>
	<!-- 实时路况 -->
	<el-menu-item index="10" @click = "handleClick">实时路况</el-menu-item>
</template>

<script setup >
import {getCurrentInstance,onMounted,ref} from 'vue'
import {Query} from'@/api/mapgis-api/Query'
import {setLineStyle} from'@/api/ol-api/setStyle'
const {proxy} = getCurrentInstance();
//声明数据源
let source = new ol.source.Vector({});
//声明图层
let layer = new ol.layer.Vector({
    source
})
//服务配置
let service = {
    docName : import.meta.env.VITE_MAPGIS_DOC_NAME,
    layerId:1,
}
onMounted(()=>{
    const map = proxy.$map;
    map.addLayer(layer)
})
let isToggle = ref(false);
const handleClick = ()=>{
    isToggle.value = !isToggle.value;
    if(isToggle.value){
        Query.queryByLayerId(service).then((feature)=>{
        feature.forEach(item => {
            const flow = item.values_.values_.车流量;
            let style ;
            if(flow >1800){
                style = setLineStyle({color:"green"})
            }else if(flow >1500){
                style = setLineStyle({color:"blue"})
            }else if(flow >1000){
                style = setLineStyle({color:"yellow"})
            }else if(flow >500){
                style = setLineStyle({color:"red"})
            }
            if(style){
                item.setStyle(style);
            }
            source.addFeature(item)
        });
        
    })
    }else{
        source.clear();
    }
    
}
</script>

<style lang="scss" scoped></style>
